import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
// import echarts from 'echarts';
// import { css, cx } from 'emotion';
// import { stylesFactory, useTheme } from '@grafana/ui';

var echarts = require('echarts');

let myChart: any;

interface Props extends PanelProps<SimpleOptions> {}

export class SimplePanel extends PureComponent<Props> {
  componentDidMount() {
    const { data } = this.props;
    console.log('===============componentDidMount=====================');
    console.log(this.props);
    console.log('====================================');
    if (myChart) {
      myChart.dispose();
      myChart = null;
      console.log('====================================');
      console.log(myChart);
      console.log('====================================');
    }

    myChart = echarts.init(document.getElementById(`chart-${data.request.panelId}`));
    // 绘制图表
    myChart.setOption({
      title: { text: 'ECharts 入门示例' },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  }

  componentDidUpdate(prevProps: any, prevState: any) {
    console.log('================componentDidUpdate====================');
    console.log(prevProps);
    console.log(prevState);
    console.log('====================================');
    const { data } = this.props;
    if (prevProps && myChart) {
      myChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
          show: prevProps.options.xAxis.show,
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      myChart.resize();
    } else {
      myChart = echarts.init(document.getElementById(`chart-${data.request.panelId}`));
      // 绘制图表
      myChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    }
  }

  render() {
    const { data, width, height } = this.props;
    return <div id={`chart-${data.request.panelId}`} style={{ width: width, height: height }}></div>;
  }
}

// export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
//   // console.log('================option====================');
//   // console.log(options);
//   // console.log('====================================');

//   // console.log('=================data===================');
//   // console.log(data);
//   // console.log('====================================');

//   // console.log('================width+height====================');
//   // console.log(width);
//   // console.log(height);
//   // console.log('====================================');
//   const theme = useTheme();
//   console.log('====================================');
//   console.log(theme);
//   console.log('====================================');
//   const styles = getStyles();
//   return (
//     <div
//       className={cx(
//         styles.wrapper,
//         css`
//           width: ${width}px;
//           height: ${height}px;
//         `
//       )}
//     >
//       <div
//         id={`main`}
//         className={css`
//           width: '100%';
//           height: '100%';
//         `}
//       ></div>
//       {/* <svg
//         className={styles.svg}
//         width={width}
//         height={height}
//         xmlns="http://www.w3.org/2000/svg"
//         xmlnsXlink="http://www.w3.org/1999/xlink"
//         viewBox={`-${width / 2} -${height / 2} ${width} ${height}`}
//       >
//         <g>
//           <circle style={{ fill: `${theme.isLight ? theme.palette.greenBase : theme.palette.blue95}` }} r={100} />
//         </g>
//       </svg> */}

//       {/* <div className={styles.textBox}>
//         {options.showSeriesCount && (
//           <div
//             className={css`
//               font-size: ${theme.typography.size[options.seriesCountSize]};
//             `}
//           >
//             Number of series: {data.series.length}
//           </div>
//         )}
//         <div>Text option value: {options.text}</div>
//       </div> */}
//     </div>
//   );
// };

// const getStyles = stylesFactory(() => {
//   return {
//     wrapper: css`
//       position: relative;
//     `,
//     svg: css`
//       position: absolute;
//       top: 0;
//       left: 0;
//     `,
//     textBox: css`
//       position: absolute;
//       bottom: 0;
//       left: 0;
//       padding: 10px;
//     `,
//   };
// });
